<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="/css/gm1.css"/>
    <script src="/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <title>登录</title>
</head>
<body>
<!--顶部logo-->

<header>
    <a href="http://www.baidu.com"><img src="/img/logo1.jpg"/></a>
    <p>欢迎登录</p>

</header>

<div class="top-2">
    <div class="top-2a">

        <p></p>
    </div>
</div>

<!--大图-->
<div class="top-3">
    <div class="img_1">
        <img src="/img/5731485aN1134b4f0.jpg"/>
    </div>
    <div id="sign">

        <div class="si_cen">
            <h2 class="act btn1">用户登录</h2>

        </div>

        <div class="si_bom1 tab" style="display: block;">
            <div class="error">
                请输入账户名和密码
            </div>

            <form id="loginForm" action="./login" method="post">
                <ul>
                    <li class="top_1">
                        <img src="/img/user_03.png" class="err_img1"/>

                        <input type="text" name="username" placeholder=" 邮箱/用户名/已验证手机" class="user"/>
                    </li>
                    <li>
                        <img src="/img/user_06.png" class="err_img2"/>
                        <input type="password" name="password" placeholder=" 密码" class="password"/>

                    </li>
                    <li class="bri">
                        <a href="">忘记密码</a>
                        <a href="https://api.weibo.com/oauth2/authorize?client_id=3112958626&response_type=code&redirect_uri=passport.gmall.com:8020/vlogin"><svg t="1581411265744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="527" width="32" height="32"><path d="M627.968 506.9056c-18.752-3.6352-9.6384-13.7344-9.6384-13.7344s18.3424-30.2336-3.6352-52.224c-27.2384-27.2256-93.4144 3.4688-93.4144 3.4688-25.28 7.8464-18.5728-3.584-15.0016-23.0144 0-22.912-7.8464-61.6704-75.1744-38.7712-67.264 23.0272-125.0176 103.68-125.0176 103.68-40.1664 53.5936-34.8416 95.0272-34.8416 95.0272 10.0352 91.4432 107.2 116.5568 182.7712 122.496 79.5136 6.2336 186.8288-27.4048 219.3664-96.5248C705.92 538.0608 646.784 510.656 627.968 506.9056zM459.8912 678.0416c-78.9376 3.6864-142.7456-35.8912-142.7456-88.5632 0-52.736 63.808-95.0272 142.7456-98.6624 78.9888-3.6352 142.9248 28.9024 142.9248 81.536C602.816 625.0112 538.88 674.4448 459.8912 678.0416z" p-id="528"></path><path d="M444.1472 525.5424c-79.3856 9.2928-70.2208 83.6608-70.2208 83.6608s-0.8064 23.552 21.2864 35.5456c46.4512 25.1648 94.2848 9.9328 118.4512-21.2736C537.8432 592.2432 523.6608 516.3136 444.1472 525.5424zM424.128 629.9136c-14.8224 1.7408-26.7648-6.8096-26.7648-19.2128 0-12.3392 10.6112-25.28 25.4464-26.8288 17.024-1.6256 28.1088 8.192 28.1088 20.5952C450.9056 616.8192 438.8992 628.2368 424.128 629.9136zM470.9248 590.0416c-5.0176 3.7504-11.2 3.2384-13.8496-1.2672-2.7648-4.3904-1.728-11.4304 3.3536-15.1168 5.888-4.3776 11.9936-3.1232 14.656 1.28C477.7344 579.4304 475.8272 586.176 470.9248 590.0416z" p-id="529"></path><path d="M666.624 474.7136c6.4 0 11.84-4.736 12.7488-10.9056 0.1152-0.4608 0.1664-0.8704 0.1664-1.3824 9.6896-87.1808-71.4368-72.1792-71.4368-72.1792-7.2064 0-12.9792 5.824-12.9792 13.0944 0 7.1552 5.7728 12.9792 12.9792 12.9792 58.2784-12.864 45.4144 45.4144 45.4144 45.4144C653.5296 468.9408 659.4048 474.7136 666.624 474.7136z" p-id="530"></path><path d="M657.1648 322.5472c-28.0448-6.5664-56.896-0.9088-64.9728 0.64-0.6272 0.064-1.216 0.6528-1.792 0.768-0.2816 0.0512-0.448 0.3456-0.448 0.3456-7.9616 2.2528-13.7984 9.6256-13.7984 18.3424 0 10.3808 8.4224 18.9312 18.9184 18.9312 0 0 10.2144-1.3696 17.1392-4.0832 6.8608-2.7648 64.96-2.0608 93.824 46.4 15.744 35.3664 6.9248 59.0336 5.824 62.8352 0 0-3.7504 9.1904-3.7504 18.24 0 10.4448 8.4224 17.0112 18.8544 17.0112 8.7296 0 16.0512-1.1904 18.1888-15.936l0.1152 0C776.256 382.784 707.3664 334.2592 657.1648 322.5472z" p-id="531"></path><path d="M512 51.2C257.5104 51.2 51.2 257.5104 51.2 512c0 254.4896 206.3104 460.8 460.8 460.8s460.8-206.3104 460.8-460.8C972.8 257.5104 766.4896 51.2 512 51.2zM512 951.8592C269.4656 951.8592 72.1408 754.5344 72.1408 512 72.1408 269.4656 269.4656 72.1408 512 72.1408c242.5344 0 439.8592 197.312 439.8592 439.8592C951.8592 754.5344 754.5344 951.8592 512 951.8592z" p-id="532"></path></svg></a>
                    </li>
                    <li class="ent">
                        <button id="btn2" type="button" class="btn2"><a href="javascript:submitLogin();" class="a">登
                            &nbsp; &nbsp;录</a></button>
                    </li>

                </ul>
                <input type="hidden" id="originUrl" name="originUrl" th:value="${originUrl}"/>
            </form>
        </div>
        <div class="si_out">

            <h5 class="rig">
                <img src="/img/4de5019d2404d347897dee637895d02b_25.png"/>
                <span><a href="#">立即注册</a></span>
            </h5>
        </div>
    </div>
</div>


<!--底部-->

<input type="hidden" th:value="${ReturnUrl}" id="ReturnUrl">
</body>
<script language="JavaScript">
    function submitLogin() {
        var userName = $("[name='username']").val()
        var passWord = $("[name='password']").val()
        $.post("login", {username: userName, password: passWord}, function (token) {
            //验证token是否为空或异常
            if(token=="fail"){
                alert("用户名或密码错误")
            }else{
                window.location.href = $("#ReturnUrl").val() + "?token=" + token
            }
        })
    }

    var btn2 = document.getElementsByClassName('btn2')[0];
    var user = document.getElementsByClassName('user')[0];
    var pass = document.getElementsByClassName('password')[0];
    var err = document.getElementsByClassName('error')[0];

    var err_img1 = document.getElementsByClassName('err_img1')[0];

    var err_img2 = document.getElementsByClassName('err_img2')[0];


    user.onfocus = function () {

        user.style.border = '1px solid #999';

    }

    pass.onfocus = function () {

        pass.style.border = '1px solid #999';
    }
    user.onblur = function () {

        user.style.border = '1px solid green';
    }
    pass.onblur = function () {

        pass.style.border = '1px solid green';
    }
</script>
</html>
